<template>
  <div class="travel-blog">
    <nav-bar :activeComponent="activeComponent"></nav-bar>
    <!-- 预览模式顶部控制栏 -->
    <div v-if="isPreviewMode" class="preview-controls">
      <div class="container">
        <div class="preview-buttons">
          <el-button type="default" @click="returnToEditor" class="edit-btn">
            <i class="el-icon-back"></i> 返回编辑
          </el-button>
          <el-button type="primary" @click="confirmPublish" class="publish-btn">
            <i class="el-icon-check"></i> 确认发表
          </el-button>
        </div>
        <div class="preview-badge">预览模式</div>
      </div>
    </div>
    <!-- 顶部封面区域 -->
    <div class="cover-section">
      <div class="cover-image" :style="{ backgroundImage: `url(${article.coverImage})` }">
        <div class="cover-overlay">
          <div class="container">
            <h1 class="article-title">{{ article.title }}</h1>
            <div class="article-meta">
              <span class="article-date">{{ formatDate(article.publishDate) }}</span>
              <span class="article-views"><i class="el-icon-view"></i> {{ article.views }}</span>
              <span class="article-likes"><i class="el-icon-star-off"></i> {{ article.likes }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="author-section">
          <div class="author-info">
            <div class="author-avatar">
              <img :src="article.author.avatar" :alt="article.author.name">
            </div>
            <div class="author-details">
              <h3 class="author-name">{{ article.author.name }}</h3>
              <div class="author-stats">
                <span>{{ article.author.articles }}篇游记</span>
                <span>{{ article.author.followers }}粉丝</span>
                <span>获赞{{ article.author.totalLikes }}</span>
              </div>
              <div class="author-bio">{{ article.author.bio }}</div>
            </div>
          </div>
          <div class="author-actions">
            <el-button
                type="primary"
                :class="['follow-btn', isFollowing ? 'is-following' : '']"
                @click="toggleFollow">
              <i :class="isFollowing ? 'el-icon-check' : 'el-icon-plus'"></i>
              {{ isFollowing ? '已关注' : '关注作者' }}
            </el-button>
          </div>
        </div>

        <div class="article-tags">
          <el-tag v-for="tag in article.tags" :key="tag.id" :type="tag.type" effect="plain" size="medium">
            {{ tag.name }}
          </el-tag>
        </div>

        <div class="article-actions">
          <div class="action-btn like-btn" @click="toggleLike">
            <i :class="isLiked ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
            <span>{{ isLiked ? '已收藏' : '收藏' }}</span>
          </div>
          <div class="action-btn share-btn" @click="showShare = true">
            <i class="el-icon-share"></i>
            <span>分享</span>
          </div>
          <div class="action-btn comment-btn" @click="scrollToComments">
            <i class="el-icon-chat-dot-round"></i>
            <span>评论 ({{ article.commentCount }})</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容主区域 -->
    <div class="container main-content">
      <div class="content-wrapper" :class="{ 'preview-mode': isPreviewMode }">
        <!-- 左侧目录栏 -->
        <div class="toc-container" :class="{ 'fixed': isTocFixed }">
          <div class="toc-wrapper">
            <h3 class="toc-title">目录</h3>
            <ul class="toc-list">
              <li v-for="(heading, index) in headings" :key="index"
                  :class="{
        'active': activeHeading === heading.id,
        'level-1': heading.level === 1,
        'level-2': heading.level === 2,
        'level-3': heading.level === 3
      }"
                  @click="scrollToHeading(heading.id)">
                {{ heading.text }}
              </li>
            </ul>
          </div>
        </div>

        <!-- 中间文章内容 -->
        <div class="article-container">
          <article class="article-content">
            <section v-for="(section, index) in article.content" :key="index" :id="'section-' + index">
              <h2 v-if="section.title" :id="'heading-' + index">{{ section.title }}</h2>

              <template v-for="(item, itemIndex) in section.content">
                <!-- 文本段落 -->
                <p v-if="item.type === 'text'" :key="'text-' + itemIndex">{{ item.content }}</p>

                <!-- 副标题 -->
                <h3 v-else-if="item.type === 'subtitle'" :key="'subtitle-' + itemIndex" :id="'subheading-' + index + '-' + itemIndex">
                  {{ item.content }}
                </h3>

                <!-- 单张图片 -->
                <div v-else-if="item.type === 'image'" :key="'image-' + itemIndex" class="article-image">
                  <img :src="item.url" :alt="item.caption">
                  <p v-if="item.caption" class="image-caption">{{ item.caption }}</p>
                </div>

                <!-- 图片组 -->
                <div v-else-if="item.type === 'imageGroup'" :key="'imggroup-' + itemIndex" class="image-gallery">
                  <div v-for="(img, imgIndex) in item.images" :key="imgIndex" class="gallery-item"
                       @click="openGallery(item.images, imgIndex)">
                    <img :src="img.url" :alt="img.caption">
                  </div>
                </div>

                <!-- 引用 -->
                <blockquote v-else-if="item.type === 'quote'" :key="'quote-' + itemIndex">
                  {{ item.content }}
                  <footer v-if="item.author">— {{ item.author }}</footer>
                </blockquote>

                <!-- 提示框 -->
                <div v-else-if="item.type === 'tip'" :key="'tip-' + itemIndex" class="tip-box">
                  <div class="tip-header">
                    <i class="el-icon-info"></i>
                    <span>旅行小贴士</span>
                  </div>
                  <div class="tip-content">{{ item.content }}</div>
                </div>
              </template>
            </section>

            <!-- 打赏区域 -->
            <div v-if="!isPreviewMode" class="reward-section">
              <div class="reward-title">喜欢这篇游记？打赏鼓励一下作者吧！</div>
              <el-button type="danger" plain round @click="showReward = true">赞赏支持</el-button>
            </div>

            <!-- 文章评论区 -->
            <div v-if="!isPreviewMode" class="comment-section" id="comments">
              <h3 class="section-title">
                <span>评论区</span>
                <small>{{ article.commentCount }}条评论</small>
              </h3>

              <div class="comment-editor">
                <div class="editor-avatar">
                  <img :src="currentUser.avatar" alt="Your Avatar">
                </div>
                <div class="editor-content">
                  <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="写下你的评论..."
                      v-model="commentContent"
                  ></el-input>
                  <div class="editor-actions">
                    <el-button type="primary" @click="submitComment">发表评论</el-button>
                  </div>
                </div>
              </div>

              <div class="comments-list">
                <div v-for="comment in article.comments" :key="comment.id" class="comment-item">
                  <div class="comment-avatar">
                    <img :src="comment.avatar" :alt="comment.username">
                  </div>
                  <div class="comment-body">
                    <div class="comment-header">
                      <span class="comment-author">{{ comment.username }}</span>
                      <span class="comment-date">{{ formatDate(comment.date) }}</span>
                    </div>
                    <div class="comment-text">{{ comment.content }}</div>
                    <div class="comment-actions">
                      <span class="action-item" @click="likeComment(comment.id)">
                        <i :class="comment.isLiked ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                        {{ comment.likes > 0 ? comment.likes : '点赞' }}
                      </span>
                      <span class="action-item" @click="replyToComment(comment.id)">
                        <i class="el-icon-chat-line-round"></i>
                        回复
                      </span>
                    </div>

                    <!-- 回复列表 -->
                    <div v-if="comment.replies && comment.replies.length > 0" class="reply-list">
                      <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                        <div class="reply-avatar">
                          <img :src="reply.avatar" :alt="reply.username">
                        </div>
                        <div class="reply-body">
                          <div class="reply-header">
                            <span class="reply-author">{{ reply.username }}</span>
                            <span class="reply-date">{{ formatDate(reply.date) }}</span>
                          </div>
                          <div class="reply-text">
                            <span v-if="reply.replyTo" class="reply-to">@{{ reply.replyTo }}</span>
                            {{ reply.content }}
                          </div>
                          <div class="reply-actions">
                            <span class="action-item" @click="likeReply(comment.id, reply.id)">
                              <i :class="reply.isLiked ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                              {{ reply.likes > 0 ? reply.likes : '点赞' }}
                            </span>
                            <span class="action-item" @click="replyToReply(comment.id, reply.id, reply.username)">
                              <i class="el-icon-chat-line-round"></i>
                              回复
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 回复框 -->
                    <div v-if="activeReplyId === comment.id" class="reply-editor">
                      <el-input
                          type="textarea"
                          :rows="2"
                          :placeholder="replyToUsername ? `回复 @${replyToUsername}` : '写下你的回复...'"
                          v-model="replyContent"
                      ></el-input>
                      <div class="editor-actions">
                        <el-button size="small" @click="cancelReply">取消</el-button>
                        <el-button size="small" type="primary" @click="submitReply(comment.id)">回复</el-button>
                      </div>
                    </div>
                  </div>
                </div>

                <div v-if="article.comments.length === 0" class="no-comments">
                  暂无评论，快来发表第一条评论吧！
                </div>

                <div v-if="hasMoreComments" class="load-more">
                  <el-button plain @click="loadMoreComments">加载更多评论</el-button>
                </div>
              </div>
            </div>
          </article>
        </div>

        <!-- 右侧推荐栏 -->
        <div v-if="!isPreviewMode" class="recommend-container">
          <div class="sticky-sidebar">
            <!-- 推荐城市 -->
            <div class="recommend-section">
              <h3 class="recommend-title">相关城市推荐</h3>
              <div class="recommend-cities">
                <div v-for="city in recommendedCities" :key="city.id" class="city-card">
                  <div class="city-image">
                    <img :src="city.image" :alt="city.name">
                  </div>
                  <div class="city-info">
                    <div class="city-name">{{ city.name }}</div>
                    <div class="city-desc">{{ city.description }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 推荐景点 -->
            <div class="recommend-section">
              <h3 class="recommend-title">相关景点推荐</h3>
              <div class="recommend-spots">
                <div v-for="spot in recommendedSpots" :key="spot.id" class="spot-card">
                  <div class="spot-image">
                    <img :src="spot.image" :alt="spot.name">
                    <div class="spot-rating">
                      <i class="el-icon-star-on"></i>
                      <span>{{ spot.rating }}</span>
                    </div>
                  </div>
                  <div class="spot-info">
                    <div class="spot-name">{{ spot.name }}</div>
                    <div class="spot-location">
                      <i class="el-icon-location-information"></i>
                      <span>{{ spot.location }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 作者其他游记 -->
            <div class="recommend-section">
              <h3 class="recommend-title">作者其他游记</h3>
              <div class="other-articles">
                <div v-for="item in otherArticles" :key="item.id" class="article-item">
                  <div class="article-item-image">
                    <img :src="item.image" :alt="item.title">
                  </div>
                  <div class="article-item-info">
                    <div class="article-item-title">{{ item.title }}</div>
                    <div class="article-item-meta">
                      <span>{{ formatDate(item.date) }}</span>
                      <span><i class="el-icon-view"></i> {{ item.views }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 同城市其他景点 -->
    <div v-if="!isPreviewMode" class="related-spots-section">
      <div class="container">
        <h2 class="section-title">同城市其他热门景点</h2>
        <div class="masonry-grid">
          <div v-for="spot in relatedSpots" :key="spot.id" class="masonry-item">
            <div class="masonry-content">
              <img :src="spot.image" :alt="spot.name">
              <div class="masonry-info">
                <h3 class="masonry-title">{{ spot.name }}</h3>
                <div class="masonry-desc">{{ spot.description }}</div>
                <div class="masonry-meta">
                  <span class="masonry-rating">
                    <i class="el-icon-star-on"></i>
                    {{ spot.rating }}
                  </span>
                  <span class="masonry-views">
                    <i class="el-icon-view"></i>
                    {{ spot.views }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 返回顶部按钮 -->
    <div class="back-to-top" v-show="showBackToTop" @click="scrollToTop">
      <i class="el-icon-top"></i>
    </div>

    <!-- 分享弹窗 -->
    <el-dialog
        title="分享游记"
        v-model:visible="showShare"
        width="400px"
        center
    >
      <div class="share-options">
        <div class="share-option" v-for="option in shareOptions" :key="option.type" @click="shareArticle(option.type)">
          <div class="share-icon" :style="{ backgroundColor: option.color }">
            <i :class="option.icon"></i>
          </div>
          <div class="share-name">{{ option.name }}</div>
        </div>
      </div>

      <div class="share-link">
        <el-input v-model="shareLink" readonly>
          <el-button icon="el-icon-copy-document" @click="copyShareLink">复制</el-button>
        </el-input>
      </div>
    </el-dialog>

    <!-- 打赏弹窗 -->
    <el-dialog
        title="赞赏支持"
        v-model:visible="showReward"
        width="400px"
        center
    >
      <div class="reward-content">
        <div class="reward-message">您的支持是作者创作的最大动力</div>
        <div class="reward-amounts">
          <div
              v-for="amount in rewardAmounts"
              :key="amount"
              :class="['amount-item', selectedAmount === amount ? 'selected' : '']"
              @click="selectedAmount = amount"
          >
            {{ amount }}元
          </div>
          <div class="amount-item custom">
            <el-input-number
                v-model="customAmount"
                :min="1"
                :max="1000"
                size="small"
                placeholder="其他金额"
                @change="selectedAmount = null"
            ></el-input-number>
          </div>
        </div>
        <div class="reward-methods">
          <div
              v-for="method in paymentMethods"
              :key="method.value"
              :class="['method-item', selectedMethod === method.value ? 'selected' : '']"
              @click="selectedMethod = method.value"
          >
            <i :class="method.icon"></i>
            <span>{{ method.label }}</span>
          </div>
        </div>
        <div class="reward-action">
          <el-button type="danger" :disabled="!canReward" @click="sendReward">确认打赏</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 图片预览 -->
    <el-dialog
        v-model:visible="showGallery"
        append-to-body
        custom-class="gallery-dialog"
        :show-close="false"
    >
      <div class="gallery-wrapper" @click="showGallery = false">
        <div class="gallery-prev" @click.stop="prevImage">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="gallery-next" @click.stop="nextImage">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="gallery-image">
          <img v-if="galleryImages.length > 0" :src="galleryImages[currentGalleryIndex].url" alt="">
          <div class="gallery-caption" v-if="galleryImages.length > 0 && galleryImages[currentGalleryIndex].caption">
            {{ galleryImages[currentGalleryIndex].caption }}
          </div>
        </div>
        <div class="gallery-count">{{ currentGalleryIndex + 1 }} / {{ galleryImages.length }}</div>
        <div class="gallery-close" @click="showGallery = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {addTravelogue} from "@/api/travelogue";

export default {
  name: 'TravelBlogPage',
  components: {NavBar},
  data() {
    return {
      // 预览状态标志
      isPreviewMode: false,
      activeComponent: 'travelogue',
      // 文章数据
      article: {
        id: 1,
        title: '探寻三亚的蔚蓝与阳光：一场热带海岛的慢生活之旅',
        coverImage: 'https://images.unsplash.com/photo-1593428536248-656c64af861d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
        publishDate: '2023-08-15',
        views: 15782,
        likes: 834,
        commentCount: 56,
        author: {
          id: 101,
          name: '旅行的意义',
          avatar: 'https://randomuser.me/api/portraits/women/68.jpg',
          bio: '摄影师，旅行家，生活记录者。足迹遍布30多个国家，100多个城市。',
          articles: 48,
          followers: 12453,
          totalLikes: 42891
        },
        tags: [
          {id: 1, name: '三亚', type: ''},
          {id: 2, name: '海岛', type: 'info'},
          {id: 3, name: '美食', type: 'success'},
          {id: 4, name: '摄影', type: 'warning'},
          {id: 5, name: '自由行', type: 'danger'}
        ],
        content: [
          {
            title: '前言：为什么选择三亚',
            content: [
              {
                type: 'text',
                content: '在经历了一年的疲惫工作后，我决定给自己放一个真正的假期。我想要阳光、海滩和远离城市的喧嚣。思来想去，三亚成为了我的不二选择。这座位于海南岛最南端的城市，拥有中国最好的热带海滩资源，被誉为"东方夏威夷"。'
              },
              {
                type: 'text',
                content: '三亚的吸引力不仅在于它绝美的自然风光，还有其独特的黎族、苗族文化，以及令人垂涎的海鲜美食。这篇游记将记录我在三亚的7天慢生活，希望能给计划前往三亚的朋友们一些参考和灵感。'
              },
              {
                type: 'image',
                url: 'https://images.unsplash.com/photo-1590059297851-83c96fd76a08?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                caption: '三亚湾的日落，这是我此行最难忘的瞬间之一'
              }
            ]
          },
          {
            title: '行前准备：最佳旅行时间与行程规划',
            content: [
              {
                type: 'text',
                content: '三亚全年气候温暖，但最佳的旅游季节是每年的10月至次年4月。此时天气晴朗，气温适宜，非常适合海上活动和户外探索。我选择在10月中旬前往，错开了国庆假期的人潮，同时又能享受到perfect的天气。'
              },
              {
                type: 'subtitle',
                content: '行程规划与住宿选择'
              },
              {
                type: 'text',
                content: '三亚的主要景区分布在不同的海湾区域，每个海湾都有其独特的特色和魅力。根据自己的需求和偏好，我将7天的行程安排在了三个不同的区域：亚龙湾、海棠湾和大东海。这样既能全面体验三亚的各种风情，又不会因为频繁更换住处而感到疲惫。'
              },
              {
                type: 'tip',
                content: '三亚的交通费用较高，建议选择住在计划游玩景点附近的酒店，这样可以节省不少时间和交通费用。如果预算充足，亚龙湾的度假酒店是不错的选择；如果想体验当地人的生活，三亚湾和大东海区域有许多性价比高的民宿。'
              },
              {
                type: 'imageGroup',
                images: [
                  {
                    url: 'https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '亚龙湾美丽的海滩'
                  },
                  {
                    url: 'https://images.unsplash.com/photo-1540541338287-41700207dee6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '海棠湾的度假酒店'
                  },
                  {
                    url: 'https://images.unsplash.com/photo-1544550285-f813f6f9c9e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '大东海的日出景色'
                  }
                ]
              }
            ]
          },
          {
            title: '探索亚龙湾：被誉为"东方夏威夷"的完美海湾',
            content: [
              {
                type: 'text',
                content: '我此行的第一站选择了被称为"天下第一湾"的亚龙湾。这里是三亚最高端的度假区，云集了众多国际品牌酒店。亚龙湾以其7公里长的月牙形海湾和细腻洁白的沙滩而闻名，海水能见度高达7-9米，水下世界丰富多彩。'
              },
              {
                type: 'subtitle',
                content: '亚龙湾热带天堂森林公园'
              },
              {
                type: 'text',
                content: '除了海滩活动，亚龙湾还有一处不能错过的景点——亚龙湾热带天堂森林公园。这里是三亚唯一可以俯瞰全景海岸线的地方。搭乘观光车沿着盘山公路上行，视野逐渐开阔，当到达最高处的观景台时，整个亚龙湾的美景尽收眼底，蔚蓝的海水与白色的沙滩形成鲜明的对比，令人陶醉。'
              },
              {
                type: 'image',
                url: 'https://images.unsplash.com/photo-1545268434-47c6563c85ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                caption: '从亚龙湾热带天堂森林公园俯瞰整个亚龙湾海岸线'
              },
              {
                type: 'text',
                content: '公园内还有过江索道、滑索等刺激项目，以及展示黎族文化的"甘什岭"。我选择了体验过江索道，高空中俯瞰热带雨林和远处的大海，那种震撼感难以用言语描述。'
              },
              {
                type: 'quote',
                content: '人生最大的浪费，是用金钱买来的东西，而不是用眼睛去看，用心去感受这个世界。',
                author: '马克·吐温'
              }
            ]
          },
          {
            title: '海棠湾：探访国家海岸和免税购物天堂',
            content: [
              {
                type: 'text',
                content: '第三天，我搬到了海棠湾区域。这里被规划为"国家海岸"，拥有12公里长的优质海岸线，沙滩洁白细腻，海水清澈见底。相比亚龙湾的热闹，海棠湾更为宁静，是真正放松身心的好地方。'
              },
              {
                type: 'subtitle',
                content: '三亚国际免税城'
              },
              {
                type: 'text',
                content: '海棠湾最著名的当属三亚国际免税城，这里是中国最大的免税购物中心，集合了数百个国际品牌。虽然我不是购物达人，但还是被这里的规模和品牌种类所震撼。值得一提的是，游客在离岛前可以在这里享受免税购物的政策，是买礼物和奢侈品的好地方。'
              },
              {
                type: 'imageGroup',
                images: [
                  {
                    url: 'https://images.unsplash.com/photo-1549465200-8927119733a0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '海棠湾的宁静海滩'
                  },
                  {
                    url: 'https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '三亚国际免税城外景'
                  }
                ]
              },
              {
                type: 'subtitle',
                content: '海昌三亚海洋探索世界'
              },
              {
                type: 'text',
                content: '如果带小朋友出行，海棠湾的海昌三亚海洋探索世界绝对不能错过。这是亚洲最大的海洋主题公园之一，结合了海洋馆、科普展览和娱乐表演。鲸鲨馆、珊瑚王国和梦幻水母区让我大开眼界，360度穹幕影院的海底世界展示更是精彩纷呈。'
              },
              {
                type: 'tip',
                content: '海昌三亚海洋探索世界建议提前在网上预订门票，不仅有折扣，还能避免排队。公园内设施齐全，可以安排一整天的时间慢慢游览。'
              }
            ]
          },
          {
            title: '大东海与三亚湾：体验当地人的慢生活',
            content: [
              {
                type: 'text',
                content: '我行程的最后三天选择了大东海和三亚湾区域。与前面两个高端度假区不同，这里更接近三亚本地人的生活，游客可以体验到更加接地气的三亚。'
              },
              {
                type: 'subtitle',
                content: '大东海的冲浪体验'
              },
              {
                type: 'text',
                content: '大东海是三亚最早开发的旅游区，也是冲浪爱好者的天堂。尽管我从未尝试过冲浪，但在教练的指导下，我还是勇敢地尝试了这项运动。虽然摔倒了无数次，但当终于能够站在冲浪板上滑行的那一刻，所有的疲惫都化为了喜悦。'
              },
              {
                type: 'image',
                url: 'https://images.unsplash.com/photo-1501850305723-0bf18f354fea?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                caption: '大东海的冲浪体验，初学者也能快速上手'
              },
              {
                type: 'subtitle',
                content: '第一市场的海鲜盛宴'
              },
              {
                type: 'text',
                content: '说到三亚，不得不提的就是海鲜。第一市场是三亚最著名的海鲜市场，也是当地人采购海鲜的地方。这里品种丰富，价格相对合理。买完海鲜后，可以到附近的加工店进行烹饪。我点了和乐蟹、龙虾、扇贝等三亚特色海鲜，味道鲜美无比，让人回味无穷。'
              },
              {
                type: 'tip',
                content: '在第一市场购买海鲜一定要讲价，一般可以砍到标价的一半左右。选择海鲜加工店时，最好找本地人推荐的，以避免被宰客。加工费通常按斤收取，购买前最好先问清楚。'
              },
              {
                type: 'subtitle',
                content: '三亚湾的椰梦长廊'
              },
              {
                type: 'text',
                content: '三亚湾的椰梦长廊是一条长达20公里，种植着成千上万棵椰子树的海滨大道。傍晚时分，我沿着长廊漫步，一边是成排的椰子树，一边是宽阔的沙滩和湛蓝的大海，远处还能看到东岛和西岛。夕阳西下时，整个海湾被染成金色，美不胜收。'
              },
              {
                type: 'imageGroup',
                images: [
                  {
                    url: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '三亚湾的椰梦长廊'
                  },
                  {
                    url: 'https://images.unsplash.com/photo-1503477742902-923d33a4d8cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '第一市场的新鲜海鲜'
                  },
                  {
                    url: 'https://images.unsplash.com/photo-1528031940632-241bb022f2d0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                    caption: '夕阳下的三亚湾'
                  }
                ]
              }
            ]
          },
          {
            title: '结语：带走阳光，留下回忆',
            content: [
              {
                type: 'text',
                content: '七天的三亚之行转眼即逝，但这段慢生活的体验却给我留下了深刻的印象。在这个喧嚣的时代，能够暂时放下工作和生活的压力，感受大自然的馈赠，是一种奢侈而宝贵的体验。'
              },
              {
                type: 'text',
                content: '三亚的魅力不仅在于它的自然风光，更在于它包容并蓄的文化和舒适宜人的生活节奏。无论是高端度假还是接地气的当地体验，都能在这座海滨城市找到属于自己的那份惬意。'
              },
              {
                type: 'quote',
                content: '旅行的意义不在于你去了多少地方，而在于那些地方给你留下了什么。',
                author: ''
              },
              {
                type: 'text',
                content: '希望这篇游记能给计划前往三亚的朋友们一些帮助和启发。无论你是为了海滩、美食还是纯粹的放松，三亚都不会让你失望。带着阳光和微笑回家，留下美好的回忆在三亚。期待下一次的相遇！'
              },
              {
                type: 'image',
                url: 'https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                caption: '再见，三亚，再见，这片蔚蓝的海洋'
              }
            ]
          }
        ],
        comments: [
          {
            id: 1,
            username: '海边漫步者',
            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
            date: '2023-08-16',
            content: '太喜欢这篇游记了！正好我下个月也要去三亚，看完这篇文章对行程有了很多想法。请问亚龙湾的酒店是住在哪里的呢？推荐一下～',
            likes: 35,
            isLiked: false,
            replies: [
              {
                id: 11,
                username: '旅行的意义',
                avatar: 'https://randomuser.me/api/portraits/women/68.jpg',
                date: '2023-08-16',
                content: '谢谢喜欢！我住的是亚龙湾迈凯轮酒店，位置很好，就在海边，服务也很棒。不过亚龙湾的香格里拉和丽思卡尔顿也很不错，可以根据自己的预算选择。',
                likes: 8,
                isLiked: false,
                replyTo: '海边漫步者'
              },
              {
                id: 12,
                username: '海边漫步者',
                avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
                date: '2023-08-16',
                content: '感谢回复！我查了一下，迈凯轮的价格在我预算范围内，已经预定了！',
                likes: 3,
                isLiked: false,
                replyTo: '旅行的意义'
              }
            ]
          },
          {
            id: 2,
            username: '美食探险家',
            avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
            date: '2023-08-17',
            content: '文章写得很详细，照片也很美！我最近刚从三亚回来，第一市场的海鲜确实便宜又新鲜，但我遇到了被宰客的情况，加工费比海鲜本身还贵。建议大家一定要问清楚加工费再决定在哪里加工。',
            likes: 42,
            isLiked: true,
            replies: []
          },
          {
            id: 3,
            username: '流浪的云',
            avatar: 'https://randomuser.me/api/portraits/men/22.jpg',
            date: '2023-08-18',
            content: '作为一个三亚本地人，很高兴看到你对我们城市的喜爱。文中提到的景点都是非常经典的选择。如果下次再来，推荐你去崖州古城和南山文化旅游区看看，体验一下三亚的历史文化。',
            likes: 17,
            isLiked: false,
            replies: [
              {
                id: 31,
                username: '旅行的意义',
                avatar: 'https://randomuser.me/api/portraits/women/68.jpg',
                date: '2023-08-18',
                content: '谢谢推荐！我确实对三亚的历史文化很感兴趣，下次一定去崖州古城和南山转转。作为本地人，你有没有什么不为人知的美食小店推荐？',
                likes: 5,
                isLiked: false,
                replyTo: '流浪的云'
              }
            ]
          }
        ]
      },

// 用户信息
      currentUser: {
        id: 1001,
        username: '旅游爱好者',
        avatar: 'https://randomuser.me/api/portraits/men/42.jpg'
      },

// 推荐城市
      recommendedCities: [
        {
          id: 201,
          name: '海口',
          image: 'https://images.unsplash.com/photo-1578469550956-0e16b69c6a3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '海南省会，拥有东方夏威夷之称的滨海城市'
        },
        {
          id: 202,
          name: '丽江',
          image: 'https://images.unsplash.com/photo-1582887175572-418a5829c475?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '云南古城，东方威尼斯，世界文化遗产地'
        },
        {
          id: 203,
          name: '厦门',
          image: 'https://images.unsplash.com/photo-1567595747138-abc10129b679?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '东南沿海港口城市，拥有美丽的鼓浪屿'
        }
      ],

// 推荐景点
      recommendedSpots: [
        {
          id: 301,
          name: '蜈支洲岛',
          image: 'https://images.unsplash.com/photo-1559971577-75d25ca7148e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          location: '三亚市海棠湾',
          rating: 4.8
        },
        {
          id: 302,
          name: '南山文化旅游区',
          image: 'https://images.unsplash.com/photo-1528028357556-95aee0b2f845?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          location: '三亚市崖州区',
          rating: 4.6
        },
        {
          id: 303,
          name: '天涯海角',
          image: 'https://images.unsplash.com/photo-1544984148-c9a1f631ccc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          location: '三亚市天涯区',
          rating: 4.5
        },
        {
          id: 304,
          name: '大小洞天',
          image: 'https://images.unsplash.com/photo-1580265649066-79bb70fde661?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          location: '三亚市天涯区',
          rating: 4.3
        }
      ],

// 作者其他游记
      otherArticles: [
        {
          id: 101,
          title: '普吉岛蜜月之旅：邂逅安达曼海的浪漫',
          image: 'https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          date: '2023-06-10',
          views: 12583
        },
        {
          id: 102,
          title: '云南大理：苍山洱海间的慢时光',
          image: 'https://images.unsplash.com/photo-1545242373-e31761478466?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          date: '2023-04-22',
          views: 18975
        },
        {
          id: 103,
          title: '张家界三日游：行走在阿凡达的世界',
          image: 'https://images.unsplash.com/photo-1537889230395-c3ad49b62bb9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          date: '2023-02-15',
          views: 24561
        }
      ],

// 同城市其他景点
      relatedSpots: [
        {
          id: 401,
          name: '亚特兰蒂斯水世界',
          image: 'https://images.unsplash.com/photo-1567602053758-9f0c75acbe31?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '亚洲最大的水上主题乐园之一，拥有众多刺激的水上项目',
          rating: 4.7,
          views: 34589
        },
        {
          id: 402,
          name: '西岛',
          image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '三亚四大名岛之一，以"奇、秀、美、浪"闻名于世',
          rating: 4.5,
          views: 28976
        },
        {
          id: 403,
          name: '鹿回头公园',
          image: 'https://images.unsplash.com/photo-1503614472-8c93d56e92ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '三亚的象征，登高可俯瞰整个三亚市区和三亚湾',
          rating: 4.6,
          views: 31245
        },
        {
          id: 404,
          name: '热带天堂森林公园',
          image: 'https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '三亚唯一可以俯瞰海岸线的地方，有"天堂"之称',
          rating: 4.8,
          views: 43561
        },
        {
          id: 405,
          name: '三亚千古情',
          image: 'https://images.unsplash.com/photo-1558634249-cf14aea53e77?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '大型实景演出，展示海南黎苗文化历史',
          rating: 4.9,
          views: 56782
        },
        {
          id: 406,
          name: '海棠湾红树林',
          image: 'https://images.unsplash.com/photo-1591017099773-9f79148211a0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
          description: '天然的红树林保护区，生态环境优美',
          rating: 4.4,
          views: 19845
        }
      ],

// 目录相关
      headings: [],
      activeHeading: '',
      isTocFixed: false,

// 评论相关
      commentContent: '',
      activeReplyId: null,
      replyContent: '',
      replyToUsername: '',
      hasMoreComments: true,

// 用户交互状态
      isFollowing: false,
      isLiked: false,
      showBackToTop: false,

// 分享相关
      showShare: false,
      shareLink: 'https://travel.example.com/blog/123456',
      shareOptions: [
        {type: 'weixin', name: '微信', icon: 'el-icon-chat-dot-round', color: '#07C160'},
        {type: 'weibo', name: '微博', icon: 'el-icon-chat-line-round', color: '#E6162D'},
        {type: 'qq', name: 'QQ', icon: 'el-icon-message', color: '#12B7F5'},
        {type: 'douban', name: '豆瓣', icon: 'el-icon-notebook-2', color: '#007722'}
      ],

// 打赏相关
      showReward: false,
      rewardAmounts: [5, 10, 20, 50, 100],
      selectedAmount: 20,
      customAmount: 1,
      paymentMethods: [
        {label: '微信支付', value: 'wechat', icon: 'el-icon-chat-dot-round'},
        {label: '支付宝', value: 'alipay', icon: 'el-icon-money'}
      ],
      selectedMethod: 'wechat',

// 图片画廊
      showGallery: false,
      galleryImages: [],
      currentGalleryIndex: 0
    }
  },
  computed: {
    canReward() {
      return (this.selectedAmount > 0 || this.customAmount > 0) && this.selectedMethod;
    }
  },
  mounted() {
    // 提取标题
    this.extractHeadings();

    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll);

    // 执行初始检查
    this.handleScroll();

    // 检查是否是预览模式
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('preview') === 'true') {
      this.isPreviewMode = true;
      // 从sessionStorage获取预览数据
      const previewData = sessionStorage.getItem('previewTravelJournal');
      if (previewData) {
        try {
          // 替换页面数据为预览数据
          const parsedData = JSON.parse(previewData);
          this.article = {...this.article, ...parsedData};

          // 重新提取标题刷新目录
          this.extractHeadings();
        } catch (error) {
          console.error('解析预览数据时发生错误:', error);
        }
      }
    }
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    // 点击确认发表时
    // 最终解决方案，包装在travelogue对象中
    confirmPublish() {
      // 处理标签数据 - 确保标签是正确的格式
      let tagsData = this.article.tags;

      // 如果标签是字符串形式，尝试解析它
      if (typeof tagsData === 'string') {
        try {
          tagsData = JSON.parse(tagsData);
        } catch (e) {
          console.error('解析标签字符串失败', e);
          this.$message.error('标签数据格式错误');
          return;
        }
      }

      // 提取标签名称数组
      const tagNames = tagsData.map(tag => tag.name);
      alert(this.article.title)

      // 创建符合后端实体结构的对象，并包装在travelogue对象中
      const requestData = {
          title: this.article.title,
          content: JSON.stringify(this.article.content),
          authorId: this.currentUser.id,
          updateTime: new Date(),
          createTime: new Date(),
          tags: tagNames,  // 发送标签名称数组
          imagePath: this.article.coverImage,
          status: 1,
          isFeatured: 0,
          isEditor: 0,
          viewCount: 0,
          likeCount: 0,
          commentCount: 0

      };

      console.log("发送数据:", JSON.stringify(requestData));

      // 调用API保存数据
      addTravelogue(requestData).then(response => {
        if (response.data.code === 200) {
          this.$message.success('游记发布成功！');
          this.$router.push('/myTravelogues');
        } else {
          this.$message.error('发布失败：' + response.data.msg);
        }
      }).catch(error => {
        this.$message.error('发布出错：' + error.message);
        console.error('发布错误详情:', error);
      });
    },
    // 将预览内容转换回编辑器格式
    transformContentForEditor() {
      const paragraphs = [];

      // 遍历所有section
      this.article.content.forEach(section => {
        // 添加section标题作为h1
        if (section.title) {
          paragraphs.push({
            type: 'text',
            format: 'h1',
            content: section.title
          });
        }

        // 遍历section中的内容
        section.content.forEach(item => {
          switch (item.type) {
            case 'text':
              paragraphs.push({
                type: 'text',
                format: 'normal',
                content: item.content
              });
              break;

            case 'subtitle':
              paragraphs.push({
                type: 'text',
                format: 'h2', // 或者根据实际情况判断是h2还是h3
                content: item.content
              });
              break;

            case 'image':
              paragraphs.push({
                type: 'image',
                layout: 'single',
                images: [{
                  url: item.url,
                  caption: item.caption || ''
                }]
              });
              break;

            case 'imageGroup':
              paragraphs.push({
                type: 'image',
                layout: item.images.length <= 2 ? 'double' :
                    item.images.length === 3 ? 'triple' : 'quad',
                images: item.images.map(img => ({
                  url: img.url,
                  caption: img.caption || ''
                }))
              });
              break;

            case 'quote':
              paragraphs.push({
                type: 'quote',
                content: item.content,
                author: item.author || ''
              });
              break;

            case 'tip':
              paragraphs.push({
                type: 'tip',
                content: item.content
              });
              break;

              // 其他类型内容的处理...
          }
        });
      });

      return paragraphs;
    },
    // 返回编辑页面
    returnToEditor() {
      // 从当前预览数据构建编辑器需要的数据结构
      const editData = {
        title: this.article.title,
        coverImage: this.article.coverImage,
        selectedTags: this.article.tags || [],
        paragraphs: this.transformContentForEditor() // 需要实现这个方法来将预览内容转换回编辑格式
      };

      // 将数据序列化并存储在sessionStorage中
      sessionStorage.setItem('returnEditData', JSON.stringify(editData));

      // 导航回编辑页面
      this.$router.push('/postLogue');
    },
    // 提取文章中的标题用于目录
    // 在methods中修改extractHeadings方法
    extractHeadings() {
      this.headings = [];

      // 提取一级标题
      this.article.content.forEach((section, index) => {
        if (section.title) {
          this.headings.push({
            id: 'heading-' + index,
            text: section.title,
            level: 1 // 标记为一级标题
          });
        }

        // 提取二级标题
        section.content.forEach((item, itemIndex) => {
          if (item.type === 'subtitle') {
            this.headings.push({
              id: 'subheading-' + index + '-' + itemIndex,
              text: item.content,
              level: 2 // 标记为二级标题
            });
          }

          // 如果有三级标题，可以在这里提取
          // 例如，如果item中有children且包含标题
          if (item.children && Array.isArray(item.children)) {
            item.children.forEach((child, childIndex) => {
              if (child.type === 'subsubtitle') {
                this.headings.push({
                  id: 'subsubheading-' + index + '-' + itemIndex + '-' + childIndex,
                  text: child.content,
                  level: 3 // 标记为三级标题
                });
              }
            });
          }
        });
      });
    },

    // 处理页面滚动
    handleScroll() {
      // 检查是否显示返回顶部按钮
      this.showBackToTop = window.scrollY > 500;

      // // 检查目录是否需要固定
      // const tocContainer = document.querySelector('.toc-container');
      // if (tocContainer) {
      //   const mainContent = document.querySelector('.main-content');
      //   const mainContentTop = mainContent.getBoundingClientRect().top;
      //   this.isTocFixed = mainContentTop <= 0;
      // }

      // 更新当前活动标题
      this.updateActiveHeading();
    },

    // 更新目录中当前活动的标题
    updateActiveHeading() {
      // 获取所有标题元素
      const headingElements = [];
      this.headings.forEach(heading => {
        const element = document.getElementById(heading.id);
        if (element) {
          headingElements.push({
            id: heading.id,
            top: element.getBoundingClientRect().top
          });
        }
      });

      // 找到当前视图中的标题
      let activeHeading = null;
      for (let i = 0; i < headingElements.length; i++) {
        if (headingElements[i].top > 80) break;
        activeHeading = headingElements[i].id;
      }

      if (activeHeading) {
        this.activeHeading = activeHeading;
      }
    },

    // 滚动到指定标题
    scrollToHeading(headingId) {
      const element = document.getElementById(headingId);
      if (element) {
        // 计算偏移量，考虑固定导航栏的高度
        const offset = 80;
        const elementPosition = element.getBoundingClientRect().top + window.scrollY;
        window.scrollTo({
          top: elementPosition - offset,
          behavior: 'smooth'
        });
      }
    },

    // 滚动到评论区
    scrollToComments() {
      const commentsSection = document.getElementById('comments');
      if (commentsSection) {
        commentsSection.scrollIntoView({ behavior: 'smooth' });
      }
    },

    // 返回顶部
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },

    // 关注作者
    toggleFollow() {
      this.isFollowing = !this.isFollowing;

      // 这里应该调用API进行关注/取消关注操作
      if (this.isFollowing) {
        this.$message.success('已成功关注该作者');
      } else {
        this.$message.info('已取消关注');
      }
    },

    // 收藏文章
    toggleLike() {
      this.isLiked = !this.isLiked;

      // 更新数据
      if (this.isLiked) {
        this.article.likes++;
        this.$message.success('收藏成功');
      } else {
        this.article.likes--;
        this.$message.info('已取消收藏');
      }
    },

    // 提交评论
    submitComment() {
      if (!this.commentContent.trim()) {
        this.$message.warning('评论内容不能为空');
        return;
      }

      // 这里应该调用API提交评论
      const newComment = {
        id: Date.now(),
        username: this.currentUser.username,
        avatar: this.currentUser.avatar,
        date: new Date().toISOString().slice(0, 10),
        content: this.commentContent,
        likes: 0,
        isLiked: false,
        replies: []
      };

      // 添加到评论列表
      this.article.comments.unshift(newComment);
      this.article.commentCount++;
      this.commentContent = '';

      this.$message.success('评论发布成功');
    },

    // 回复评论
    replyToComment(commentId) {
      this.activeReplyId = commentId;
      this.replyToUsername = '';
      this.replyContent = '';
    },

    // 回复回复
    replyToReply(commentId, replyId, username) {
      this.activeReplyId = commentId;
      this.replyToUsername = username;
      this.replyContent = '';
    },

    // 取消回复
    cancelReply() {
      this.activeReplyId = null;
      this.replyToUsername = '';
      this.replyContent = '';
    },

    // 提交回复
    submitReply(commentId) {
      if (!this.replyContent.trim()) {
        this.$message.warning('回复内容不能为空');
        return;
      }

      // 找到要回复的评论
      const comment = this.article.comments.find(c => c.id === commentId);
      if (comment) {
        // 创建新回复
        const newReply = {
          id: Date.now(),
          username: this.currentUser.username,
          avatar: this.currentUser.avatar,
          date: new Date().toISOString().slice(0, 10),
          content: this.replyContent,
          likes: 0,
          isLiked: false,
          replyTo: this.replyToUsername
        };

        // 添加到回复列表
        if (!comment.replies) {
          comment.replies = [];
        }
        comment.replies.push(newReply);

        // 更新评论计数
        this.article.commentCount++;

        // 清空回复框
        this.activeReplyId = null;
        this.replyToUsername = '';
        this.replyContent = '';

        this.$message.success('回复发布成功');
      }
    },

    // 点赞评论
    likeComment(commentId) {
      const comment = this.article.comments.find(c => c.id === commentId);
      if (comment) {
        comment.isLiked = !comment.isLiked;
        if (comment.isLiked) {
          comment.likes++;
        } else {
          comment.likes--;
        }
      }
    },

    // 点赞回复
    likeReply(commentId, replyId) {
      const comment = this.article.comments.find(c => c.id === commentId);
      if (comment && comment.replies) {
        const reply = comment.replies.find(r => r.id === replyId);
        if (reply) {
          reply.isLiked = !reply.isLiked;
          if (reply.isLiked) {
            reply.likes++;
          } else {
            reply.likes--;
          }
        }
      }
    },

    // 加载更多评论
    loadMoreComments() {
      // 这里应该调用API加载更多评论
      this.$message.info('加载更多评论');
      // 示例：加载完所有评论后
      setTimeout(() => {
        this.hasMoreComments = false;
      }, 2000);
    },

    // 分享文章
    shareArticle(type) {
      // 这里应该实现具体的分享逻辑
      this.$message.success(`已分享到${this.shareOptions.find(option => option.type === type).name}`);
      this.showShare = false;
    },

    // 复制分享链接
    copyShareLink() {
      navigator.clipboard.writeText(this.shareLink).then(() => {
        this.$message.success('链接已复制到剪贴板');
      }).catch(() => {
        this.$message.error('复制失败，请手动复制');
      });
    },

    // 发送打赏
    sendReward() {
      const amount = this.selectedAmount || this.customAmount;
      const method = this.paymentMethods.find(m => m.value === this.selectedMethod).label;

      // 这里应该调用支付接口
      this.$message.success(`感谢您的${amount}元打赏，正在跳转到${method}`);
      this.showReward = false;
    },

    // 打开图片画廊
    openGallery(images, index) {
      this.galleryImages = images;
      this.currentGalleryIndex = index;
      this.showGallery = true;
    },

    // 上一张图片
    prevImage() {
      if (this.currentGalleryIndex > 0) {
        this.currentGalleryIndex--;
      } else {
        this.currentGalleryIndex = this.galleryImages.length - 1;
      }
    },

    // 下一张图片
    nextImage() {
      if (this.currentGalleryIndex < this.galleryImages.length - 1) {
        this.currentGalleryIndex++;
      } else {
        this.currentGalleryIndex = 0;
      }
    },

    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
}
</script>

<style>

.content-wrapper.preview-mode {
  grid-template-columns: 240px minmax(0, 1fr) 300px;
}

.content-wrapper.preview-mode .recommend-container {
  visibility: hidden;
}

@media (max-width: 1200px) {
  .content-wrapper.preview-mode {
    grid-template-columns: 200px minmax(0, 1fr) 250px;
  }
}

@media (max-width: 992px) {
  .content-wrapper.preview-mode {
    grid-template-columns: 1fr;
  }
}
.preview-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px 0;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.preview-controls .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-buttons {
  display: flex;
  gap: 15px;
}

.edit-btn {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
}

.edit-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.publish-btn {
  background-color: #67C23A;
  border-color: #67C23A;
}

.publish-btn:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}

.preview-badge {
  background-color: #E6A23C;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
/* 调整底部内容以适应固定的预览控制栏 */
.preview-mode .back-to-top {
  bottom: 90px; /* 确保返回顶部按钮不被控制栏遮挡 */
}

.preview-mode .related-spots-section,
.preview-mode .main-content {
  margin-bottom: 60px; /* 确保底部内容不被控制栏遮挡 */
}

/* 响应式样式 */
@media (max-width: 768px) {
  .preview-controls .container {
    flex-direction: column-reverse; /* 在移动端，将标志放在上面，按钮放在下面 */
    gap: 10px;
  }

  .preview-badge {
    align-self: center;
    margin-bottom: 5px;
  }

  .preview-buttons {
    width: 100%;
    justify-content: space-between;
  }

  .edit-btn, .publish-btn {
    flex: 1;
    margin: 0 5px;
  }

  /* 确保返回顶部按钮在移动设备上不被控制栏遮挡 */
  .preview-mode .back-to-top {
    bottom: 120px;
  }

  /* 增加移动设备下的底部边距 */
  .preview-mode .related-spots-section,
  .preview-mode .main-content {
    margin-bottom: 100px;
  }
}
/* 全局样式和基础设置 */
.travel-blog {
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #f7f9fc;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 封面区域 */
.cover-section {
  margin-bottom: 30px;
}

.cover-image {
  height: 500px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 100px 0 30px;
  color: white;
}

.article-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  opacity: 0.9;
}

.article-meta i {
  margin-right: 5px;
}

/* 作者信息 */
.author-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.author-info {
  display: flex;
  align-items: center;
}

.author-avatar {
  margin-right: 15px;
}

.author-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.author-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.author-stats {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.author-stats span {
  margin-right: 15px;
}

.author-bio {
  font-size: 14px;
  color: #666;
  max-width: 600px;
}

.follow-btn {
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s;
}

.follow-btn.is-following {
  background-color: #f0f0f0;
  color: #333;
  border-color: #ddd;
}

/* 文章标签 */
.article-tags {
  padding: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 文章操作按钮 */
.article-actions {
  display: flex;
  margin: 15px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.action-btn {
  display: flex;
  align-items: center;
  margin-right: 30px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  padding: 5px 0;
  transition: all 0.3s;
}

.action-btn i {
  font-size: 18px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #409EFF;
}

.like-btn.active {
  color: #ff6b6b;
}

/* 主内容区布局 */
.main-content {
  position: relative;
  z-index: 0; /* 设置基础层级 */
  overflow: visible; /* 确保内容不被裁剪 */
}

.content-wrapper {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 30px;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/* 左侧目录 */
.toc-container {
  grid-column: 1;
  width: 240px;
  align-self: start;
  position: sticky;
  top: calc(70px + 20px); /* 导航栏高度(约70px) + 期望的间距(20px) */
  max-height: calc(100vh - 70px - 40px); /* 视口高度减去导航栏高度和上下间距 */
  overflow-y: auto;
  z-index: 10;
  /* 隐藏默认滚动条但保留滚动功能 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent; /* Firefox */

  /* 初始状态隐藏滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: background-color 0.3s ease;
  }

}

@supports (-ms-overflow-style: none) {
  .toc-container {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
.toc-container.fixed {
  position: sticky;
  top: calc(70px); /* 保持与导航栏的距离 */
}

.toc-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  padding: 15px;
  width: 75%;
  text-align: left;
  height: 80%;
  margin-bottom: 20px; /* 确保底部有足够空间 */
}

.toc-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.toc-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left; /* 确保列表左对齐 */
}

.toc-list li {
  padding: 6px 0;
  cursor: pointer;
  color: #555;
  transition: all 0.3s;
  position: relative;
  font-size: 14px;
  word-wrap: break-word; /* 允许长词断行 */
  overflow-wrap: break-word; /* 确保长单词/文本能够断行 */
  hyphens: auto; /* 在合适的位置添加连字符 */
  display: flex; /* 使用flex处理符号和文本 */
  align-items: flex-start; /* 保证顶部对齐 */
  text-align: left; /* 确保列表项左对齐 */
  justify-content: flex-start; /* 确保flex布局下内容左对齐 */
  line-height: 1.4; /* 增加行高以便于阅读 */
}
.toc-list li span {
  text-align: left;
}
/* 一级标题样式 */
.toc-list li.level-1 {
  padding-left: 8px; /* 一级目录左边一个空格 */
  font-weight: 500;
}

.toc-list li.level-1::before {
  content: '•'; /* 一级目录使用圆点 */
  color: #409EFF;
  display: inline-block;
  width: 15px;
  margin-right: 5px;
  font-size: 16px;
}

/* 二级标题样式 */
.toc-list li.level-2 {
  padding-left: 24px; /* 二级目录左边三个空格 */
  font-size: 13px;
}

.toc-list li.level-2::before {
  content: '▪'; /* 二级目录使用小方块 */
  color: #67C23A;
  display: inline-block;
  width: 15px;
  margin-right: 5px;
  font-size: 12px;
}

/* 三级标题样式 */
.toc-list li.level-3 {
  padding-left: 40px; /* 三级目录左边五个空格 */
  font-size: 12px;
}

.toc-list li.level-3::before {
  content: '▹'; /* 三级目录使用三角形 */
  color: #E6A23C;
  display: inline-block;
  width: 15px;
  margin-right: 5px;
  font-size: 12px;
}
.toc-list li:hover {
  color: #409EFF;
}

.toc-list li.active {
  color: #409EFF;
}

.toc-list li.is-sub {
  padding-left: 15px;
  font-size: 13px;
}

.toc-list li.is-sub::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  left: 0;
  top: 14px;
}

.toc-list li.is-sub.active::before {
  background-color: #409EFF;
}

/* 中间文章内容 */
.article-container {
  grid-column: 2; /* 明确指定在中间列 */
  min-width: 0; /* 防止内容溢出 */
  background: white; /* 确保背景色覆盖 */
  position: relative;
  z-index: 5; /* 比侧边栏低但必须确保可见 */
}

.article-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-bottom: 30px;
}

.article-content h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.article-content h2:first-child {
  margin-top: 0;
}

.article-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 30px 0 15px;
}

.article-content p {
  margin-bottom: 20px;
  text-align: justify;
}

.article-image {
  margin: 20px 0;
}

.article-image img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.image-caption {
  font-size:
      13px;
  color: #666;
  text-align: center;
  margin-top: 8px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.gallery-item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

blockquote {
  background-color: #f8f9fa;
  border-left: 4px solid #409EFF;
  padding: 15px 20px;
  margin: 20px 0;
  color: #555;
  font-style: italic;
}

blockquote footer {
  margin-top: 10px;
  font-weight: 500;
  text-align: right;
}

.tip-box {
  background-color: #ecf8ff;
  border-radius: 6px;
  padding: 15px 20px;
  margin: 20px 0;
}

.tip-header {
  display: flex;
  align-items: center;
  color: #409EFF;
  font-weight: 600;
  margin-bottom: 10px;
}

.tip-header i {
  margin-right: 8px;
}

.tip-content {
  color: #555;
  font-size: 14px;
}

/* 打赏区域 */
.reward-section {
  text-align: center;
  margin: 40px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.reward-title {
  margin-bottom: 15px;
  font-size: 16px;
  color: #666;
}

/* 评论区 */
.comment-section {
  margin-top: 40px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.section-title small {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.comment-editor {
  display: flex;
  margin-bottom: 30px;
}

.editor-avatar {
  margin-right: 15px;
}

.editor-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.editor-content {
  flex: 1;
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.comments-list {
  margin-top: 30px;
}

.comment-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.comment-avatar {
  margin-right: 15px;
}

.comment-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-body {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 500;
  color: #333;
}

.comment-date {
  font-size: 12px;
  color: #999;
}

.comment-text {
  margin-bottom: 10px;
}

.comment-actions {
  display: flex;
  color: #999;
  font-size: 13px;
}

.action-item {
  margin-right: 15px;
  cursor: pointer;
}

.action-item i {
  margin-right: 5px;
}

.action-item:hover {
  color: #409EFF;
}

.reply-list {
  margin: 15px 0 0 20px;
  padding-left: 20px;
  border-left: 2px solid #eee;
}

.reply-item {
  display: flex;
  margin-bottom: 15px;
}

.reply-avatar {
  margin-right: 10px;
}

.reply-avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.reply-body {
  flex: 1;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.reply-author {
  font-weight: 500;
  font-size: 13px;
}

.reply-date {
  font-size: 12px;
  color: #999;
}

.reply-text {
  font-size: 13px;
  margin-bottom:
      8px;
}

.reply-to {
  color: #409EFF;
  margin-right: 5px;
}

.reply-actions {
  font-size: 12px;
  color: #999;
}

.reply-editor {
  margin-top: 15px;
}

.no-comments {
  text-align: center;
  padding: 30px 0;
  color: #999;
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

/* 右侧推荐区域 */
.recommend-container {
  grid-column: 3;
  width: 300px;
  position: relative; /* 改为相对定位，跟随页面流动 */
  align-self: start;
  z-index: 10;
}

.sticky-sidebar {
  position: relative; /* 改为相对定位，取消粘性效果 */
  top: auto; /* 移除顶部固定位置 */
}

.recommend-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.recommend-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.recommend-cities {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.city-card {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}

.city-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.city-image {
  width: 80px;
  height: 80px;
}

.city-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-info {
  flex: 1;
  padding: 10px;
}

.city-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.city-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.recommend-spots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.spot-card {
  background-color: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}

.spot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.spot-image {
  position: relative;
  height: 100px;
}

.spot-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-rating {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.spot-rating i {
  color: #ffcb47;
  margin-right: 3px;
}

.spot-info {
  padding: 10px;
}

.spot-name {
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spot-location {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
}

.spot-location i {
  font-size: 12px;
  margin-right: 3px;
  color: #999;
}

.other-articles {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.article-item {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}

.article-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.article-item-image {
  width: 100px;
  height: 70px;
}

.article-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-item-info {
  flex: 1;
  padding: 10px;
}

.article-item-title {
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 5px;
  line-height: 1.4;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-item-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: space-between;
}

/* 图钉墙 */
.related-spots-section {
  background-color: #f0f2f5;
  padding: 60px 0;
  margin-top: 60px;
}

.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #333;
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.masonry-item {
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
  cursor: pointer;
}

.masonry-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.masonry-content {
  width: 100%;
}

.masonry-content img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.masonry-info {
  padding: 15px;
}

.masonry-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.masonry-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.masonry-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.masonry-rating {
  display: flex;
  align-items: center;
}

.masonry-rating i {
  color: #ffcb47;
  margin-right: 3px;
}

.masonry-views {
  display: flex;
  align-items: center;
}

.masonry-views i {
  margin-right: 3px;
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 99;
}

.back-to-top i {
  font-size: 20px;
  color: #666;
}

.back-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.back-to-top:hover i {
  color: #409EFF;
}

/* 分享弹窗 */
.share-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.share-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.share-icon i {
  font-size: 24px;
  color: white;
}

.share-name {
  font-size: 14px;
}

.share-link {
  margin-top: 20px;
}

/* 打赏弹窗 */
.reward-content {
  text-align: center;
}

.reward-message {
  margin-bottom: 20px;
  color: #666;
}

.reward-amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.amount-item {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.amount-item.selected {
  border-color: #f56c6c;
  color: #f56c6c;
  background-color: #fef0f0;
}

.amount-item.custom {
  padding: 0;
  border: none;
}

.reward-methods {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.method-item {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.method-item i {
  margin-right: 5px;
}

.method-item.selected {
  border-color: #f56c6c;
  color: #f56c6c;
  background-color: #fef0f0;
}

.reward-action {
  margin-top: 20px;
}

/* 图片预览弹窗 */
.gallery-dialog {
  background-color: transparent;
  box-shadow: none;
}

.gallery-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-image {
  max-width: 90vw;
  max-height: 80vh;
  position: relative;
}

.gallery-image img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.gallery-caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  padding: 10px;
  font-size: 14px;
}

.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.3s;
}

.gallery-prev:hover,
.gallery-next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.gallery-prev {
  left: 30px;
}

.gallery-next {
  right: 30px;
}

.gallery-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.3s;
}

.gallery-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.gallery-count {
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .toc-list li {
    font-size: 13px;
  }
  .toc-list li.level-2 {
    font-size: 12px;
  }

  .toc-list li.level-3 {
    font-size: 11px;
  }
  .content-wrapper {
    grid-template-columns: 200px minmax(0, 1fr) 250px;
    gap: 20px;
  }

  .toc-container {
    width: 200px;
  }

  .recommend-container {
    width: 250px;
  }
}

@media (max-width: 992px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  .toc-list li.level-1 {
    padding-left: 5px;
  }

  .toc-list li.level-2 {
    padding-left: 15px;
  }

  .toc-list li.level-3 {
    padding-left: 25px;
  }

  .article-container {
    grid-column: 1;
    order: 1; /* 确保内容显示在第一位 */
  }

  .toc-container {
    grid-column: 1;
    order: 2;
    position: static;
    width: 100%;
    margin-top: 20px;
  }

  .recommend-container {
    grid-column: 1;
    order: 3;
    position: static;
    width: 100%;
    margin-top: 20px;
  }

  .cover-image {
    height: 400px;
  }

  .article-title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }

  .toc-container {
    display: none;
  }

  .article-container {
    grid-column: span 1;
  }

  .cover-image {
    height: 300px;
  }

  .article-title {
    font-size: 28px;
  }

  .author-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-actions {
    margin-top: 15px;
    align-self: flex-start;
  }

  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 576px) {
  .cover-image {
    height: 250px;
  }

  .article-title {
    font-size: 24px;
  }

  .author-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-avatar {
    margin-bottom: 10px;
  }

  .comment-editor {
    flex-direction: column;
  }

  .editor-avatar {
    margin-bottom: 10px;
  }

  .image-gallery {
    grid-template-columns: 1fr;
  }

  .share-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}
</style>